<template>
  <view class="wraper">
    <!-- <wd-sticky :offset-top="headerHeight - 2"> -->
    <wd-sidebar v-model="active" @change="handleChange">
      <scroll-view
        scroll-y
        :style="scrollStyle"
        @scroll="onSidebarScroll"
        refresher-enabled
        :refresher-triggered="triggered"
        @refresherrefresh="scrollToponRefresh"
        :refresher-threshold="20"
        refresher-default-style="none"
        class="bg-fill-1"
      >
        <wd-sidebar-item
          v-for="(item, index) in categories"
          :key="index"
          :value="index"
          :label="item.label"
        >
        </wd-sidebar-item>
      </scroll-view>
    </wd-sidebar>
    <!-- </wd-sticky> -->
    <scroll-view
      scroll-y
      :style="scrollStyle"
      scroll-with-animation
      :scroll-top="scrollTop"
      :throttle="false"
      @scroll="onScroll"
      refresher-enabled
      :refresher-triggered="triggered"
      @refresherrefresh="scrollToponRefresh"
      :refresher-threshold="20"
      refresher-default-style="none"
    >
      <view v-for="(item, index) in categories" :key="index" class="category">
        <view class="bg-white pl-3 pr-4">
          <view class="text-size-1 color-[#000] pt-[28rpx] pb-3">
            {{ item.title }}
          </view>
          <view
            v-for="(goodsItem, index) in item.items"
            class="pb-[24rpx]"
            :key="index"
          >
            <GoodsCard :data="goodsItem" :showSpecBtn="true"> </GoodsCard>
          </view>
        </view>
      </view>
    </scroll-view>
  </view>
</template>
<script setup>
import { onMounted, ref, getCurrentInstance, watch, computed } from "vue";
import { getRect, isArray } from "wot-design-uni/components/common/util";
import GoodsCard from "@/components/goods-card/index.vue";
defineOptions({
  options: {
    styleIsolation: "shared",
  },
});
const active = ref(0);
const scrollTop = ref(0);
const itemScrollTop = ref([]);
const instance = getCurrentInstance();
// 用于判断是否是通过点击侧边栏触发的滚动
const isHandleChangeScroll = ref(false);
// props
const props = defineProps({
  scrollHeight: {
    type: Number,
    default: 0,
  },
});

// 返回scrollHeight 的style
const scrollStyle = computed(() => {
  return {
    height: props.scrollHeight + "px",
  };
});
const emit = defineEmits(["scroll", "refresher-triggered"]);

const subCategories = ref(
  new Array(24).fill(null).map(() => ({
    imgUrl: "/static/images/temp/logo.png",
    title: "移修适用于苹果11 屏幕（标准）",
    description: "适配型号苹果12/苹果12Pro",
    price: "129.9",
    stock: 129,
    num: 0,
  }))
);

const categories = ref([
  {
    label: "移修-苹果",
    title: "移修-苹果",
    items: subCategories.value,
  },
  {
    label: "移修-华为",
    title: "移修-华为",
    items: subCategories.value,
  },
  {
    label: "移修-OPPO",
    title: "移修-OPPO",
    items: subCategories.value.slice(0, 18),
  },
  {
    label: "移修-VIVO",
    title: "移修-VIVO",
    items: subCategories.value.slice(0, 21),
  },
]);

onMounted(() => {
  getRect(".category", true, instance.proxy).then((rects) => {
    if (isArray(rects)) {
      // 增加一个基础高度
      const baseTop = 180;
      itemScrollTop.value = rects.map((item) => ({
        top: item.top - baseTop || 0,
        bottom: (item.top || 0) + (item.height || 0) - baseTop,
      }));
    }
  });
});

function handleChange({ value }) {
  active.value = value;
  isHandleChangeScroll.value = true;
  scrollTop.value = itemScrollTop.value[value].top;
}

function onSidebarScroll(e) {
  const { scrollTop } = e.detail;
  // 发送滚动事件到父组件
  emit("scroll", scrollTop);
}
// 滚动事件处理
function onScroll(e) {
  const { scrollTop } = e.detail;
  const threshold = 50;
  // 发送滚动事件到父组件
  // 如果点击侧边栏的 不触发
  if (!isHandleChangeScroll.value) {
    emit("scroll", scrollTop);
  } else {
    // 点击侧边栏的重置标记
    isHandleChangeScroll.value = false;
  }
  // 处理顶部边界情况
  if (scrollTop < threshold) {
    active.value = 0;
    return;
  }
  // 找到当前滚动位置所在的分类
  const index = itemScrollTop.value.findIndex((item) => {
    // 当前滚动位置在该分类的范围内
    return scrollTop >= item.top - threshold && scrollTop < item.bottom;
  });

  if (index > -1) {
    active.value = index;
  }
}
// 下拉刷新 控制父组件的头部隐藏
let triggered = ref(false);
function scrollToponRefresh(e) {
  triggered.value = true;
  setTimeout(() => {
    triggered.value = false;
  }, 100);
  emit("refresher-triggered");
}
</script>

<style lang="scss" scoped>
.wraper {
  display: flex;
  :deep(.wd-sidebar-item) {
    color: #86909c !important;
    font-size: 24rpx !important;
    flex-direction: column !important;
    font-weight: 500 !important;
    padding: 24rpx;
    &.wd-sidebar-item--active {
      color: var(--free-primary-6) !important;
    }
  }
}

.content {
  flex: 1;
  background: fff;
}
</style>
